<template>
  <div class="list">
    <h3 >{{tabs[currentIndex].tabName}}</h3>
    <div class="good" v-for="(item,index) in tabs[currentIndex].list" :key="index">
        <img :src="item.pic" >
        <h2>{{item.name}}</h2>
        <span class="con">{{item.con}}</span><br>
        <span class="price">￥{{item.price}}</span>
        <button>+</button>
    </div>
  </div>
</template>

<script>

export default {
    props:{
        tabs:{type:Array,default:[]},
        currentIndex:0
    }
}
</script>

<style lang="scss" scoped>
img{
    width: 120px;
    height: 120px;
    float: left;
}
.list{
    width: 100%;
}
.good{
    height: 140px;
    position: relative;
}
h3{
    margin: 15px 0;
}
.good .con{
    color: #959595;
    display: inline-block;
    margin: 5px 0;
}
.good .price{
    position: absolute;
    bottom: 10%;
    font-size: 18px;
    color: red;
}
button{
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 30px;
    height: 30px;
    background: blue;
    border: none;
    border-radius: 50%;
    font-size: 26px;
    color: white;
}
</style>